<template>
    <div>
        <div class="dlzibox" v-for="(v,i) in canshu" :key="i">
            <div class="dlzi" @click="fun(i)">
                <div>
                    <img class="dlimg" :src="v.imgurl" alt="">
                </div>
                <div class="titbox">
                    <h3 class="h31"><span class="span1">{{v.sp1}}</span>{{v.dltit}}</h3>
                    <p class="pinfo">{{v.dlinfo}}</p>
                    <span v-for="(item,index) in v.sp" :key="index">
                        <span class="span2">{{item}}</span>
                    </span>
                    <p class="pricebox">
                        <span class="dlprice">{{v.dlprice}}</span>
                        <span class="dlms">{{v.ms}}</span>
                    </p>
                    <p class="dlpm">{{v.dlpm}}</p>
                </div>
            </div>
        </div>
    </div>
</template>


<script>

export default {
    // 接收父组件传回来的值
    props:{
        canshu:Array
    },
    methods:{
        fun(i){
           let thisid=this.canshu[i]
           this.$router.push({name:'xiangqing',params:{thisid:thisid}});
        }
    }
}
</script>

<style scopde>
    .dlzi{
        display: flex;
        padding: 0.15rem 0.22rem;
        border-top: 0.01rem solid rgb(235, 231, 231);
    }
    .dlimg{
        margin-top: 0.15rem;
        height: 0.8rem;
        width: 1.2rem;
    }
    .titbox{
        margin-left: 0.18rem;
    }
    .h31{
        font-size: 0.14rem;
        font-weight: bold;
        columns: #333;
    }
    .span1{
        display: inline-block;
        padding: 0.02rem;
        font-size: 0.12rem;
        background-color:rgb(255, 0, 0);
        color: #fff;
        border-radius: 0.02rem;
    }
    .pinfo{
        font-size: 0.12rem;
        color: rgb(51, 42, 42);
    }
    .span2{
        display: inline-block;
        background-color:#ccc;
        padding: 0.02rem;
        font-size: 0.12rem;
        color: rgb(124, 121, 121);
        margin-right: 0.05rem;
        border-radius: 0.02rem;
    }
    .pricebox{
        margin-top:0.05rem;
    }
    .dlprice{
        font-size: 0.14rem;
        color: red;
    }
    .dlms{
        display: inline-block;
        margin-left: 0.1rem;
        font-size: 0.12rem;
        color: #666;
    }
    .dlpm{
        font-size: 0.12rem;
        color: #333;
    }
</style>